<!--用户登陆界面-->
<template>
<div>
  <div class="container">
    <div class="forms-container">
      <div class="signin-signup">
        <form class="sign-in-form">
          <h2 class="title">登录</h2>
          <el-form ref="loginForm" :model="loginForm"  >
            <div class="input-field">
              <i class="fas fa-user"></i>
              <input  v-model="loginForm.username" type="text" placeholder="账号" />
            </div>
            <div class="input-field">
              <i class="fas fa-lock"></i>
              <input type="password" v-model="loginForm.password"  placeholder="密码" />
            </div>
<!--            <div class="input-field">
              <i class="fas fa-user"></i>
              <input  v-model="loginForm.code" type="text" placeholder="验证码" @keyup.enter.native="handleLogin" />
            </div>
              <div class="login-code">
                <img :src="codeUrl" @click="getCode" class="login-code-img"  style="border-radius: 5px;"/>
              </div>-->
              <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
<!--  验证码模块 -->
<!--            <div class="input-field">
              <i class="fas fa-user"></i>
              <input v-model="loginForm.code" type="text" placeholder="验证码" @keyup.enter.native="handleLogin"
                     class="code-input" />
              <div class="code-image" @click="getCode" style="border-radius: 5px;">
                <img :src="codeUrl" alt="验证码" />
              </div>
            </div>-->

            <el-button  @click="handleLogin"  type="primary" round >立即登陆</el-button>
          </el-form>

          <p class="social-text">通过其他方式登陆:敬请期待</p>
          <div class="social-media">
            <a  class="social-icon" @click="otherInfo">
              <i class="fab fa-qq"></i>
              dev
            </a>
<!--            <a href="#" class="social-icon">
              <i class="fab fa-weixin"></i>
            </a>-->
<!--            <a href="#" class="social-icon">
              <i class="fab fa-weibo"></i>
            </a>
            <a href="#" class="social-icon">
              <i class="fab fa-alipay"></i>
            </a>-->
          </div>
        </form>
        <form action="#" class="sign-up-form">
          <h2 class="title">注册</h2>
          <div class="input-field">
            <i class="fas fa-user"></i>
            <input type="text" placeholder="用户名" />
          </div>
          <div class="input-field">
            <i class="fas fa-envelope"></i>
            <input type="email" placeholder="邮箱" />
          </div>
          <div class="input-field">
            <i class="fas fa-lock"></i>
            <input type="password" placeholder="密码" />
          </div>
          <input type="submit" class="btn" value="立即注册" />
<!--          <p class="social-text">通过其他方式:敬请期待</p>
          <div class="social-media">
            <a  class="social-icon" @click="otherInfo">
              <i class="fab fa-qq"></i>
            </a>
            <a  class="social-icon">
              <i class="fab fa-weixin"></i>
            </a>
            <a  class="social-icon">
              <i class="fab fa-weibo"></i>
            </a>
            <a  class="social-icon">
              <i class="fab fa-alipay"></i>
            </a>
          </div>-->
        </form>
      </div>
    </div>

    <div class="panels-container">
      <div class="panel left-panel">
        <div class="content">
          <h3>欢迎使用</h3>
          <p>
           如有疑问，请闲鱼联系~绞尽脑汁
          </p>
<!--          <button class="btn transparent" id="sign-up-btn">
            感谢合作
          </button>-->
        </div>
        <img src="src/views/user/userLogin/img/log.svg" class="image" alt="" />
      </div>
      <div class="panel right-panel">
        <div class="content">
          <h3>已有帐号？</h3>
          <p>
            立即登录已有帐号，享受独家权益。
          </p>
          <button class="btn transparent" id="sign-in-btn">
            去登录
          </button>
        </div>
        <img src="src/views/user/userLogin/img/register.svg" class="image" alt="" />
      </div>
    </div>
  </div>

<!--  <script src="src/views/user/userLogin/app.js"></script>-->
</div>
</template>
import app from './app.js'
<script>
import { getCodeImg } from '@/api/login'
import Cookies from 'js-cookie'
import { decrypt, encrypt } from '@/utils/jsencrypt'

export default {
  name: 'index',
  components:{
  },
  data(){
    return{
      codeUrl: "",
      loginForm:{
        username: null,
        password: null,
        rememberMe: false,
      },
      isMobile: false
    }
  },
  created() {
    this.getCode();
    this.getCookie();
    this.checkIsMobile();
  },
  methods:{
    otherInfo(){
      this.$message.error('其他登陆方式内测中，暂未开放')
    },
    getCode() {
      getCodeImg().then(res => {
        this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
        if (this.captchaOnOff) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      };
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, { expires: 30 });
            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove('rememberMe');
          }
          this.$store.dispatch("Login", this.loginForm).then(() => {
            if (!this.isMobile) {
              //电脑登录
               this.$router.push({ path: '/mx/order?needReload=true' })
                .catch(() => {this.$message.error("登录失败，请联系开发人员")})
            } else {
              //手机登录
              this.$router.push({ path: '/mx/mobileOrder?needReload=true' })
                .catch(() => {this.$message.error("登录失败，请联系开发人员")})
            }
          }).catch(() => {
            this.loading = false;
            if (this.captchaOnOff) {
              this.getCode();
            }
          });
        }
      });
    },
    /**
     * 判断是否是手机
     */
    checkIsMobile() {
      const userAgent = navigator.userAgent.toLowerCase()
      const mobileKeywords = ['iphone', 'android', 'windows phone']
      this.isMobile = mobileKeywords.some(keyword => userAgent.includes(keyword))
    }
  },
}
</script>

<style scoped>
@import './style.css';
.input-field {
  position: relative;
}

.code-input {
  padding-right: 30px; /* 调整右侧空间给验证码图片 */
}

.code-image {
  position: absolute;
  top: 40%;
  right: 3px;
  transform: translateY(-50%);
  width: 100px;
  height: 30px;
}

.code-image img {
  width: 100%;
  height: auto;
}
</style>
